<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="btnBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<apes-content>
  <apes-card [apesBordered]="false">
    <!-- 查询条件(固定) -->
    <div class="apes-data-kanban-particulars">

      <div apes-col [apesMd]="24">
        <div apes-form-item apes-row class="apes-item" style="padding: 16px;">
          <formly-form [model]="model" [fields]="field" [options]="options" [form]="form" (modelChange)="checkChauffeur()" ></formly-form>
        </div>


        <apes-list [apesDataSource]="rowData"
                   class="ng-table"
                   [apesBordered]="true"
                   [apesHeader]="headerKanban"
                   [apesRenderItem]="defaultItem">
          <ng-template #headerKanban>
            <div apes-row class="ng-table-row">
              <div apes-col class="ng-table-col" [apesSpan]="1">
                <label apes-checkbox [(ngModel)]="selectAll" (change)="clickSelectAll()"></label>
              </div>
              <div apes-col class="ng-table-col" [apesSpan]="1">序号</div>
              <div apes-col class="ng-table-col" [apesSpan]="2">运单</div>
              <div apes-col class="ng-table-col" [apesSpan]="2">来源单号</div>
              <div apes-col class="ng-table-col" [apesSpan]="2">来源单据类型</div>
              <div apes-col class="ng-table-col" [apesSpan]="10">商品编码/商品名称/发货件数/单位</div>
              <div apes-col class="ng-table-col" [apesSpan]="3">发货地</div>
              <div apes-col class="ng-table-col" [apesSpan]="3">收货地</div>
            </div>
          </ng-template>
          <ng-template #defaultItem let-item let-i="index">
            <!--<ng-container *ngIf="rowData != []">-->
              <apes-list-item>
                <div apes-col class="ng-table-col" [apesSpan]="1">
                  <label apes-checkbox [(ngModel)]="item.selected" (change)="checkSelectAll()"></label>
                </div>
                <div apes-col class="ng-table-col" [apesSpan]="1">{{i+1}}</div>
                <div apes-col class="ng-table-col" [apesSpan]="2">
                  <span>{{item.waybill.id}}</span>
                  <span *ngIf="item.transit">[中转]</span>
                </div>
                <div apes-col class="ng-table-col" [apesSpan]="2">{{item.waybill.sourceBusinessKey}}</div>
                <div apes-col class="ng-table-col" [apesSpan]="2">{{item.waybill.sourceBusinessType}}</div>
                <div apes-col class="ng-table-col" [apesSpan]="10">
                  <div *ngFor="let product of item.waybill.waybillCargoDetailsSet">
                    <span>{{product.productId.id}}</span>|
                    <span>{{product.productId.name}}</span>|
                    <span>{{product.loadingQty}}</span>|
                    <span>{{product.productUomId.name}}</span>
                  </div>
                </div>
                <div apes-col class="ng-table-col" [apesSpan]="3">{{item.waybill.deliveryAddress.name}}</div>
                <div apes-col class="ng-table-col" [apesSpan]="3">{{item.waybill.shippingAddress.name}}</div>
              </apes-list-item>
            <!--</ng-container>-->
          </ng-template>
          <ng-container *ngIf="rowData.length == 0">
            <apes-list-item>
              <div class="data-kanban-table-text">{{tableText}}</div>
            </apes-list-item>
          </ng-container>
        </apes-list>
      </div>

    </div>

  </apes-card>
</apes-content>
